<template>
  <form-item-setting v-model:config="config">
    <a-form-item
      field="defaultValue"
      tooltip=""
      label="默认值"
      :allow-clear="true"
    >
      <a-cascader
        v-if="config.config.options"
        v-model="config.config.defaultValue"
        :multiple="config.config.multiple"
        :options="JSON.parse(config.config.options)"
      />
    </a-form-item>
    <a-form-item
      field="placeholder"
      tooltip=""
      label="提示文字"
    >
      <a-input v-model="config.config.placeholder" allow-clear />
    </a-form-item>
    <a-form-item
      field="options"
      tooltip=""
      label="选项数据"
      required
    >
      <a-button
        type="primary"
        shape="round"
        @click="editOptions"
      >
        <template #icon>
          <icon-edit />
        </template>
        编辑数据
      </a-button>
      <code-editor
        ref="editOptionsRef"
        v-model:code="config.config.options"
      />
    </a-form-item>
    <a-form-item
      field="multiple"
      tooltip=""
      label="是否多选"
    >
      <a-switch
        v-model="config.config.multiple"
        type="round"
      >
        <template #checked>多选</template>
        <template #unchecked>单选</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="maxTagCount"
      tooltip="多选模式下，最多显示的标签数量。0 表示不限制"
      label="标签数量"
    >
      <a-input-number
        v-model="config.config.maxTagCount"
        mode="button"
        allow-clear
      />
    </a-form-item>
    <a-form-item
      field="pathMode"
      tooltip="绑定值是否为路径"
      label="是否为路径"
    >
      <a-switch
        v-model="config.config.pathMode"
        type="round"
      >
        <template #checked>是</template>
        <template #unchecked>否</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="checkStrictly"
      tooltip="开启严格选择模式，点击任何结点都可以选择。多选时将会解除父子节点的关联。"
      label="严格模式"
    >
      <a-switch
        v-model="config.config.checkStrictly"
        type="round"
      >
        <template #checked>是</template>
        <template #unchecked>否</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="allowSearch"
      tooltip=""
      label="允许搜索"
    >
      <a-switch
        v-model="config.config.allowSearch"
        type="round"
      >
        <template #checked>允许</template>
        <template #unchecked>不允许</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="allowClear"
      tooltip="是否允许清空输入框"
      label="允许清空"
    >
      <a-switch
        v-model="config.config.allowClear"
        type="round"
      >
        <template #checked>允许</template>
        <template #unchecked>不允许</template>
      </a-switch>
    </a-form-item>
    <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0">
      事件设置
    </a-divider>
    <br />
    <a-form-item
      field="onChangeFunction"
      tooltip=""
      label="Change"
    >
      <a-button
        type="primary"
        shape="round"
        @click="editOnChange"
      >
        <template #icon>
          <icon-edit />
        </template>
        编辑事件
      </a-button>
      <code-editor
        ref="codeEditorRef"
        v-model:code="config.config.onChangeFunction"
      />
    </a-form-item>
  </form-item-setting>
</template>

<script lang="ts" setup>
import { ref, defineModel } from 'vue';
import FormItemSetting from '@/components/form-design/item-setting/form-item-setting.vue';
import CodeEditor from '@/components/code-editor/index.vue';
import { SelectOptionData } from '@arco-design/web-vue';

const config = defineModel('config', { type: Object, default: {} });

const codeEditorRef = ref();

const editOptionsRef = ref();

const editOnChange = () => {
  codeEditorRef.value.open();
};

const editOptions = () => {
  editOptionsRef.value.open();
};
//  [{"value":"beijing","label":"Beijing","children":[{"value":"chaoyang","label":"ChaoYang","children":[{"value":"datunli","label":"Datunli"}]},{"value":"haidian","label":"Haidian","disabled":true},{"value":"dongcheng","label":"Dongcheng"},{"value":"xicheng","label":"Xicheng","children":[{"value":"jinrongjie","label":"Jinrongjie"},{"value":"tianqiao","label":"Tianqiao","disabled":true}]}]},{"value":"shanghai","label":"Shanghai","children":[{"value":"huangpu","label":"Huangpu"}]}]

</script>

<script lang="ts">
export default {
  name: 'ItemSettingCascader'
};
</script>

<style scoped>

</style>